<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html {
				background: #000;
				font-size: 20px;
			}
			
			.content {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
			}
			
			.old {
				width: 40%;
				height: 500px;
			}
			
			.new {
				width: 40%;
				height: 500px;
			}
			
			textarea {
				width: 100%;
				height: 100%;
				padding: 10px;
				font-size: 20px;
			}
			
			.btn {
				width: 15%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			
			.btn>div {
				width: 60%;
				background: #409EFF;
				margin-bottom: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50px;
				border-radius: 8px;
				cursor: pointer;
				color: #fff;
			}
			
			.btn>div:hover {
				background: rgb(96, 170, 243);
				color: #fff;
			}
			
			.btn input {
				width: 60%;
				height: 50px;
				padding: 10px;
				box-sizing: border-box;
				font-size: 20px;
			}
			
			.btn p {
				color: #fff;
			}
			
			h1 {
				color: #fff;
				text-align: center;
			}
			
			.row {
				display: flex;
				margin-bottom: 10px;
			}
			
			.row>div {
				width: 80px;
				height: 30px;
				background: #fff;
				color: #000;
				margin-right: 10px;
				text-align: center;
				line-height: 30px;
				border-radius: 5px;
				cursor: pointer;
				font-size: 18px;
			}
			.row>div:last-of-type{
				margin-right: 0px;
			}
			.row .clear {
				background: #67C23A;
				color: #fff;
			}
			
			.row .clear:hover {
				background: rgb(131, 179, 107);
			}
			
			.row .copy {
				background: #E6A23C;
				color: #fff;
			}
			
			.row .copy:hover {
				background: rgb(231, 186, 117);
			}
			
			.ps {
				color: red;
				padding-left: 20px;
			}
			
			.row .creat {
				width: auto;
				padding: 0 10px;
				background: #F56C6C;
				color: #fff;
				font-size: 16px;
			}
		</style>
		<script type="text/javascript">
			function enc_method() {
				var oldValue = $('.old textarea').val();
				var reg = /\r\n/g;
				var num = $('.btn input').val();
				var newValue = do_encrypt(parseInt(num), oldValue).replace(reg, '');
				//				newValue = newValue.replace(/\s*/g, '');
				newValue = newValue.replace(/\n*/g, '');
				newValue = newValue.replace(/\r*/g, '');
				newValue = newValue.replace(/\n\r/g, '');
				newValue = newValue.replace(/\t/g, '');
				newValue = newValue.replace(/'/g, '"');
				$('.new textarea').val(newValue);
			}

			function dec_method() {
				var oldValue = $('.old textarea').val();
				var num = $('.btn input').val();
				var newValue = do_decrypt(parseInt(num), oldValue);

				$('.new textarea').val(newValue);
			}

			function clear_method(_this) {
				$(_this).parent().siblings('textarea').val('');
			}

			function copy(_this) {
				$(_this).parent().siblings('textarea').select();
				document.execCommand("copy");
			}
		</script>
	</head>

	<body>
		<h1>凯撒加密解密可视化工具</h1>
		<div class="content">
			<div class="old">
				<div class="row">
					<div class="clear" onclick="clear_method(this)">清空</div>
					<div class="copy" onclick="copy(this)">复制</div>
				</div>
				<textarea name="" rows="" cols=""></textarea>
			</div>
			<div class="btn">
				<div onclick="enc_method()">加密</div>
				<div onclick="dec_method()">解密</div>
				<input type="number" name="" id="" value="5" placeholder="输入偏移量" />
				<p>默认偏移量为5</p>
			</div>
			<div class="new">
				<div class="row">
					<div class="clear" onclick="clear_method(this)">清空</div>
					<div class="copy" onclick="copy(this)">复制</div>
				
					
				</div>
				<textarea name="" rows="" cols=""></textarea>
			</div>
		</div>
		<div class="ps">注：加密前请去掉代码里的注释,加密和解密的偏移量必须相等</div>
	</body>

</html>;